<style lang="less" scoped>
  .page__wrapper {
    position: absolute;
    left: 0;
    top: 0;
    // display: flex;
    // flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    .chart__panel {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      background: #f5f5f5;
      #T1,
      #T2,
      #T3 {
        flex: 1;
        display: flex;
        flex-direction: column;
        height: 33%;
        > div {
          display: flex;
          &.pie__title {
            padding: 15px 20px 5px;
          }
          &.pie__con {
            justify-content: space-around;
            flex: 1;
            padding-bottom: 5px;
          }
          > div {
            // flex: 1;
          }
        }
      }
    }
  }
</style>
<template>
  <div class="page__wrapper">
    <!-- <simple-form v-model="searchModel" :form-field="searchFormField">
      <template slot="tableOperation">
        <el-button>{{$t('operation.search')}}</el-button>
        <el-button @click="handleShowClick">{{$t('operation.create')}}</el-button>
      </template>
    </simple-form> -->

    <div class="chart__panel">
      <div id="T1">
        <div class="pie__title">未上市托管入系统报表</div>
        <div class="pie__con">
          <dashboard-pie @click="handleChartClick" style="width: 12%; box-shadow: 0 2px 12px 0 rgba(0,0,0,.1)" v-for="(T1DataItem, T1DataIndex) in T1ChartData" :key="T1DataIndex" chart-id="T11" :chart-title="T1DataItem.title" :chart-value="T1DataItem.value"></dashboard-pie>
        </div>
      </div>
      <div id="T2">
        <div class="pie__title">多种经营企业入系统报表</div>
        <div class="pie__con" style="background: white; width: 98%; margin-left: 1%; box-shadow: 0 2px 12px 0 rgba(0,0,0,.1)">
          <dashboard-pie @click="handleChartClick" style="width: 12%" v-for="(T2DataItem, T2DataIndex) in T2ChartData" :key="T2DataIndex" chart-id="T21" :chart-title="T2DataItem.title" :chart-value="T2DataItem.value"></dashboard-pie>
        </div>
      </div>
      <div id="T3">
        <div class="pie__title">厂办大集体入系统报表</div>
        <div class="pie__con">
          <dashboard-pie @click="handleChartClick" style="width: 12%; box-shadow: 0 2px 12px 0 rgba(0,0,0,.1)" v-for="(T3DataItem, T3DataIndex) in T3ChartData" :key="T3DataIndex" chart-id="T11" :chart-title="T3DataItem.title" :chart-value="T3DataItem.value"></dashboard-pie>
        </div>
      </div>
    </div>

    <statistic-dialog :show-flag.sync="isShowDetailDialog"></statistic-dialog>
  </div>
</template>

<script>
import statisticDialog from './statisticDetail'

export default {
  data () {
    return {
      chartGroups: ['未上市托管入系统报表', '多种经营企业入系统报表', '厂办大集体入系统报表'],
      searchModel: { accountPeriod: '2019', quarter: '1' },
      isShowDetailDialog: false,

      T1ChartData: [
        { title: '改革推进情况表', value: 52 },
        { title: '资产负债情况表', value: 58 },
        { title: '主要经营情况表', value: 59 },
        { title: '矿区主要经营情况表', value: 66 },
        { title: '分业务分单位利润情况表', value: 76 },
        { title: '在职人员增减变化情况表', value: 88 },
        { title: '分业务分单位人员情况表', value: 92 }
      ],
      T2ChartData: [
        { title: '基本情况表', value: 51 },
        { title: '改革推进情况表', value: 60 },
        { title: '资产负债情况表', value: 65 },
        { title: '主要经营情况表', value: 84 },
        { title: '在职人员增减变化情况表', value: 90 }
      ],
      T3ChartData: [
        { title: '基本情况报表', value: 50 },
        { title: '改革推进情况报表', value: 56 },
        { title: '资产负债情况报表', value: 63 },
        { title: '主要经营情况报表', value: 74 },
        { title: '人员情况统计报表', value: 75 },
        { title: '在职人员增减变化情况报表', value: 88 },
        { title: '人员分流安置情况报表', value: 97 }
      ]
    }
  },
  components: { statisticDialog },
  computed: {
    quarter () { return this.$getDictList('quarter') },

    searchFormField () {
      return [
        { prop: 'accountPeriod', label: this.$t('debt_balance.accountPeriod'), type: 'Datepicker', component: { clearable: true, type: 'year', valueFormat: 'yyyy' } },
        { prop: 'quarter', label: this.$t('debt_balance.quarter'), type: 'Select', component: { optionList: this.quarter, clearable: true } },
        { slotName: 'tableOperation', col: { xs: 12, sm: 16, md: 12, style: { textAlign: 'right' } }, labelWidth: '0' }
      ]
    }
  },
  methods: {
    handleChartClick () {
      this.isShowDetailDialog = true
    }
  }
}
</script>
